<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--公共的 .js .css-->
<div th:replace="~{include-head :: head}"></div>
<body>
<!--add模态框-->
<div th:replace="~{include-modal-menu-add :: menuadd}"></div>
<!--update模态框-->
<div th:replace="~{include-modal-menu-edit :: menuedit}"></div>

<div th:replace="~{include-nav :: nav}"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="~{include-sidebar :: sidebar}"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="glyphicon glyphicon-th-list"></i>
                    权限菜单列表
                    <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal">
                        <i class="glyphicon glyphicon-question-sign"></i>
                    </div>
                </div>
                <div class="panel-body">
                    <ul id="treeDemo" class="ztree">


                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/script/my-menu.js"></script>
<script type="text/javascript">
    //初始化
    var setting = {   };
    var zNodes =[
        { name:"父节点1 - 展开", open:true,
            children: [
                { name:"父节点11 - 折叠",
                    children: [
                        { name:"叶子节点111"},
                        { name:"叶子节点112"},
                        { name:"叶子节点113"},
                        { name:"叶子节点114"}
                    ]},
                { name:"父节点12 - 折叠",
                    children: [
                        { name:"叶子节点121"},
                        { name:"叶子节点122"},
                        { name:"叶子节点123"},
                        { name:"叶子节点124"}
                    ]},
                { name:"父节点13 - 没有子节点", isParent:true}
            ]},
        { name:"父节点2 - 折叠",
            children: [
                { name:"父节点21 - 展开", open:true,
                    children: [
                        { name:"叶子节点211"},
                        { name:"叶子节点212"},
                        { name:"叶子节点213"},
                        { name:"叶子节点214"}
                    ]},
                { name:"父节点22 - 折叠",
                    children: [
                        { name:"叶子节点221"},
                        { name:"叶子节点222"},
                        { name:"叶子节点223"},
                        { name:"叶子节点224"}
                    ]},
                { name:"父节点23 - 折叠",
                    children: [
                        { name:"叶子节点231"},
                        { name:"叶子节点232"},
                        { name:"叶子节点233"},
                        { name:"叶子节点234"}
                    ]}
            ]},
        { name:"父节点3 - 没有子节点", isParent:true}

    ];

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });

    $(function(){
        //替换菜单内容 为数据库中查询到的内容
        initWholeTree();

        //确定添加  给保存按钮绑定单击响应函数
        $("#menuAddBtn").click(function () {
            // 收集表单填写的数据
            var name = $.trim($("#menuAddModal [name='name']").val());
            var url = $.trim($("#menuAddModal [name='url']").val());
            var icon = $("#menuAddModal [name='icon']:checked").val();
            if(name == null || name == "") {
                layer.msg("请填写菜单项名称！");
                return ;
            }

            if(url == null || url == "") {
                layer.msg("请填写菜单项对应的访问地址！");
                return ;
            }

            // 发送Ajax请求 add
            $.ajax({
                "url":"/fundingadmin/menu/save",
                "type":"post",
                "dataType":"json",
                "data":{
                    "name":name,
                    "url":url,
                    "pid":window.menuId,   // 当前操作的节点是新节点的父节点
                    "icon":icon
                },
                "success":function(response){

                    var result = response.result;

                    if(result == "SUCCESS") {
                        layer.msg("操作成功！");

                        initWholeTree();
                    }

                    if(result == "FAILED") {
                        layer.msg(response.message);
                    }

                },
                "error":function(response){
                    layer.msg(response.message);
                }
            });


            $("#menuAddModal").modal("hide");
        });

        //确定修改  更新menu
        $("#menuEditBtn").click(function(){

            // 收集表单填写的数据
            var name = $.trim($("#menuEditModal [name='name']").val());
            var url = $.trim($("#menuEditModal [name='url']").val());
            var icon = $("#menuEditModal [name='icon']:checked").val();

            if(name == null || name == "") {
                layer.msg("请填写菜单项名称！");
                return ;
            }

            if(url == null || url == "") {
                layer.msg("请填写菜单项对应的访问地址！");
                return ;
            }

            // 发送Ajax请求 更新menu
            $.ajax({
                "url":"/fundingadmin/menu/update",
                "type":"post",
                "dataType":"json",
                "data":{
                    "id":window.menuId,
                    "name":name,
                    "url":url,
                    "icon":icon
                },
                "success":function(response){

                    var result = response.result;

                    if(result == "SUCCESS") {
                        layer.msg("操作成功！");

                        initWholeTree();
                    }

                    if(result == "FAILED") {
                        layer.msg(response.message);
                    }

                },
                "error":function(response){
                    layer.msg(response.message);
                }
            });

            $("#menuEditModal").modal("hide");
        });


    });
    //替换菜单内容 为数据库中查询到的内容
    function initWholeTree(){
        // setting对象中包含zTree的设置属性
        var setting = {
            "view": {
                //设置自定义图标
                "addDiyDom": showMyIcon
            },
            "data": {
                "key": {
                    "url": "notExistsProperty" // 阻止点击节点后跳转
                }
            }
        };

        // 发送Ajax请求获取zNodes数据
        $.ajax(
             {
            "url":"/fundingadmin/menu/get/whole/tree",
            "type":"post",
            "dataType":"json",
            "success":function(response){

                var result = response.result;

                if(result == "SUCCESS") {
                    // 用于显示树形结构的节点数据
                    var zNodes = response.data;

                    // 执行树形结构的初始操作
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                }

                if(result == "FAILED") {
                    layer.msg("加载菜单数据失败！原因是："+response.message);
                }
            },
            "error":function(response){
                layer.msg("加载菜单数据失败！原因是："+response.message);
            }
        });
    }





</script>
</body>
</html>
